<template>
  <div>
    <el-form ref="dataForm" class="form" :rules="rules" :model="temp" label-position="right" label-width="130px">
      <el-form-item label="公众号APPID:" prop="appId">
        <el-select v-model="temp.appId" placeholder="请选择" @change="changeAppID">
          <el-option
            v-for="item in appIdList"
            :key="item.accountAppId"
            :label="item.label"
            :value="item.accountAppId"
          >
            <span style="float: left;">{{ item.accountAppId }}</span>
            <span style="float: right; font-size: 13px; color: #8492a6;">{{ item.accountDesc }}</span>
          </el-option>
        </el-select>
        <el-tooltip placement="right">
          <div slot="content">公众号APP的编号，应用在微信公众号开放平台注册时生成</div>
          <i class="el-icon-question" />
        </el-tooltip>
      </el-form-item>
      <el-form-item label="应用APPID:" prop="appAppId">
        <el-input v-model.trim="temp.appAppId" placeholder="请输入" clearable maxlength="50" />
      </el-form-item>
      <el-form-item label="APP应用秘钥:" prop="appAppKey">
        <el-input v-model.trim="temp.appAppKey" type="password" disabled placeholder="请输入" maxlength="50" />
      </el-form-item>
      <el-form-item label="商户ID:" prop="mchId">
        <el-input v-model.trim="temp.mchId" placeholder="请输入" clearable maxlength="50" />
        <el-tooltip placement="right">
          <div slot="content">支付商户号</div>
          <i class="el-icon-question" />
        </el-tooltip>
      </el-form-item>
      <el-form-item label="支付秘钥:" prop="accKey">
        <el-input v-model.trim="temp.accKey" type="password" placeholder="请输入" clearable maxlength="50" />
      </el-form-item>
      <el-form-item label="商户税率:" prop="taxRate">
        <el-select v-model="temp.taxRate" placeholder="请选择">
          <el-option
            v-for="item in taxRateList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="$loadingPlugin.submit" @click="save">保存配置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { queryWxaccountList, selectPayAccount, savePayAccount } from '@/api'
  import { mapGetters } from 'vuex'

  export default {
    name: 'IcbcTab',
    data() {
      return {
        appIdList: [],
        defaultData: {},
        temp: {
          mchId: '',
          appAppId: '',
          appId: '',
          accKey: '',
          taxRate: '',
          appAppKey: '',
          corpSN: '',
          accountId: '',
          accountType: 1
        },
        rules: {
          appId: [{ required: true, message: '请输入公众号APPID', trigger: 'change' }],
          appAppId: [{ required: true, message: '请输入应用APPID', trigger: 'change' }],
          appAppKey: [{ required: true, message: '请输入APP应用秘钥', trigger: 'blur' }],
          mchId: [{ required: true, message: '请输入商户Id', trigger: 'change' }],
          accKey: [{ required: true, message: '请输入支付秘钥', trigger: 'change' }],
          taxRate: [{ required: true, message: '请选择商户税率', trigger: 'change' }]
        },
        taxRateList: [
          { label: '0.1%', value: 0.1 },
          { label: '0.2%', value: 0.2 },
          { label: '0.3%', value: 0.3 },
          { label: '0.4%', value: 0.4 },
          { label: '0.5%', value: 0.5 },
          { label: '0.6%', value: 0.6 }
        ]
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    async created() {
      await this.getWechatAppIdList()
      await Promise.all([this.getDefaultData()])
    },
    methods: {
      async getWechatAppIdList() {
        const res = await queryWxaccountList({ pageIndex: 1, pageSize: 999 })
        this.appIdList = res.data.rows
      },
      async getDefaultData() {
        const res = await selectPayAccount({ accountType: 1 })
        this.temp = Object.assign(this.temp, res.data)
        this.defaultData = res.data
        this.changeAppID(this.temp.appId)
      },
      changeAppID(value) {
        const item = this.appIdList.find(item => item.accountAppId === value)
        this.temp.appAppKey = item ? item.accountAppSecret : ''
      },
      save() {
        this.$refs.dataForm.validate(valid => {
          if (!valid) return
          const params = {
            ...this.temp
          }
          this.submit(params)
        })
      },
      async submit(params) {
        await savePayAccount(params)
        this.$notify({
          title: '提示',
          message: '操作成功',
          type: 'success',
          duration: 2000
        })
      }
    }
  }
</script>

<style scoped>
  .form-item {
    width: 500px;
  }
  .el-input,
  .el-select {
    width: 350px;
  }
</style>
